<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="../d3-tip.css" />
    <style>
      circle {
        cursor: pointer;
      }
    </style>
  </head>
  <body>
    <script src="../d3.js"></script>
    <script src="../d3-v6-tip.js"></script>
    <script>
      const data = [
        { date: "2010", avg: 545 },
        { date: "2011", avg: 512 },
        { date: "2012", avg: 493 },
        { date: "2013", avg: 566 },
        { date: "2014", avg: 589 },
        { date: "2015", avg: 601 },
        { date: "2016", avg: 575 },
        { date: "2017", avg: 523 },
        { date: "2018", avg: 476 },
        { date: "2019", avg: 503 },
        { date: "2020", avg: 625 },
        { date: "2021", avg: 584 },
        { date: "2022", avg: 539 },
        { date: "2023", avg: 561 },
      ];

      const svg = d3
        .select("body")
        .append("svg")
        .attr("width", 800)
        .attr("height", 600)
        .style("border", "1px solid #ccc");

      const x = d3
        .scaleBand()
        .domain(data.map((d) => d.date))
        .range([0, 600]);

      const y = d3
        .scaleLinear()
        .domain(d3.extent(data, (d) => d.avg))
        .range([400, 0])
        .nice();

      const line = d3
        .line(
          (d) => x(d.date) + x.bandwidth() / 2,
          (d) => y(d.avg)
        )
        .curve(d3.curveStep);
      const d = line(data);

      const g = svg.append("g").attr("transform", "translate(100,100)");
      g.append("path").attr("d", d).attr("fill", "none").attr("stroke", "#ccc");

      g.selectAll("circle")
        .data(data)
        .join("circle")
        .attr("cx", (d) => x(d.date) + x.bandwidth() / 2)
        .attr("cy", (d) => y(d.avg))
        .attr("r", 3)
        .attr("fill", "steelblue");

      const yAxis = d3.axisLeft(y);
      g.append("g").call(yAxis);

      const xAxis = d3.axisBottom(x);
      g.append("g").attr("transform", "translate(0,400)").call(xAxis);
    </script>
  </body>
</html>
